import React, { useState } from 'react'
import { Carousel } from 'antd';
import style from './index.module.scss'
import { getAssetPath } from '@/utils';
const iconArray = [
    {
        dataIndex: "1-",
        title: ["机器人协同式总成焊接技术", "无损探伤检测技术"],
        content: ["焊接接头的缺陷率", "（如气孔、裂纹、未熔合等）", "控制在 [0.5%] 以内，焊接结构更可靠"],
        imgUrl: [getAssetPath("/carousel-icon/1-bac.png"), getAssetPath("/carousel-icon/1-bac-2.png")]
    },
    {
        dataIndex: 2,
        title: ["卧式动态循环结构", "兼容静态装料系统", "中间功能扩展模块", "模块化控制系统"],
        content: ["卧循连续，装料适广", "模块可选，多用作业", "模组调控，免守免监"],
        imgUrl: [getAssetPath("/carousel-icon/2-bac.jpg"), getAssetPath("/carousel-icon/2-bac-2.png")]
    },
    {
        dataIndex: 3,
        title: ["立式循环结构", "兼容装料系统", "立体热源送风系统", "智能化存取系统"],
        content: ["立式高扩，省料省地", "盘架多模，兼融动静", "立体送风，节能多能", "按需调产，租仓提效"],
        imgUrl: [getAssetPath("/carousel-icon/3-bac.png"), getAssetPath("/carousel-icon/3-bac-2.png")]
    },
    {
        dataIndex: 4,
        title: ["太阳能集热器", "传热与储热系统", "热交互系统"],
        content: ["集热效率可达 70% - 80%", "工作温度范围为 30℃ - 80℃", "换热效率在 80% - 95%"],
        imgUrl: [getAssetPath("/carousel-icon/4-bac.png")]
    },
    {
        dataIndex: 5,
        title: ["废热循环技术"],
        content: ["产生90℃热水", "120℃以上的高温蒸汽", "节能70%以上，能效比高达3.5"],
        imgUrl: [getAssetPath("/carousel-icon/5-bac.png")]
    },
    {
        dataIndex: 6,
        title: ["超低温前直流变频技术"],
        content: ["智能恒定控温", "超低温制热性能", "-35°C正常运行"],
        imgUrl: [getAssetPath("/carousel-icon/1-bac.png"), getAssetPath("/carousel-icon/1-bac-2.png")]
    },
]

const CarouselComp: React.FC = () => {
    const [iconData, setIconData] = useState<{ dataIndex: string | number }[]>(iconArray)
    const onChange = (currentSlide: number) => {
        const res = iconArray.map((v, i) => {
            if (i === currentSlide) {
                return {
                    dataIndex: currentSlide === 0 ? v.dataIndex : v.dataIndex + "-"
                }
            } else {
                return {
                    dataIndex: String(v.dataIndex).replace("-", "")
                }
            }
        })
        setIconData(res)
    }
    return (
        <div className='carousel-comp'>
            <Carousel afterChange={onChange} autoplaySpeed={5000} dots={false} rootClassName={`${style["ant-carousel"]}`} autoplay={true} draggable={true} fade={true}>
                {
                    iconArray.map((data, index) => (
                        <div className={style["carousel-item"]} key={index}>
                            {
                                data.title.map(v => (
                                    <div className='text-[16px] tracking-[3px]' key={v}>{v}</div>
                                ))
                            }
                            <div className='flex justify-between my-[15px]'>
                                {
                                    data.imgUrl.map((image, index) => (
                                        <img src={image} className={data.imgUrl.length === 1 ? "w-full" : "w-[48%]"} alt="" key={index} />
                                    ))
                                }
                            </div>
                            {
                                data.content.map(v => (
                                    <div className='text-[12px] flex justify-end tracking-[3px] leading-5' key={v}>
                                        {v}
                                    </div>
                                ))
                            }
                        </div>
                    ))
                }
            </Carousel>
            <div className='flex mt-[10px]'>
                {
                    iconData.map(icon => (
                        <img key={icon.dataIndex} style={{ width: `calc(100% / ${iconArray.length})` }} src={getAssetPath(`/carousel-icon/${icon.dataIndex}.png`)} alt="" />
                    ))
                }
            </div>
        </div>
    )
}

export default CarouselComp